<div class="container-fluid mt-4">
    <!-- 头部标题 -->
    <div class="card mb-2">
        <!--Card content-->
        <div class="card-body">
            <h6 class="mb-2 mb-sm-0 pt-1" style="text-align: center;">视频统计</h6>
        </div>
    </div>
    <!-- 头部标题-end -->
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg">
            <div class="card mb-2">
                <!--Card content-->
                <div class="card-body">
                    <div id="classCount" style="height: 500px;"></div>
                </div>
            </div>
        </div>
        <div class="col-lg">
            <div class="card mb-2">
                <!--Card content-->
                <div class="card-body">
                    <div id="teacherCount" style="height: 500px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    {
        let classCharts = echarts.init($("#classCount")[0]);
        let teacherCharts = echarts.init($("#teacherCount")[0]);
    
        function initClassChart(data) {
            let option = {
                title: {
                    text: '各科视频统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    type: 'scroll',
                    top: 40,
                    data: data.legendData,
                    selected: data.selected
                },
                series: [
                    {
                        name: '课程',
                        type: 'pie',
                        radius: '70%',
                        center: ['50%', '55%'],
                        data: data.seriesData,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            classCharts.setOption(option);
        }
        function initTeacherChart(data) {
            let option = {
                title: {
                    text: '老师视频统计',
                    left: 'center'
                },
                tooltip: {},
                xAxis: {
                    data: data.legendData
                },
                yAxis: {},
                dataZoom: [
                    {
                        type:"slider",
                        show: true,
                        startValue: 0,
                        endValue: 3
                    }
                ],
                series: [{
                    data: data.seriesData,
                    type: 'bar'
                }]
            };
            teacherCharts.setOption(option);
        }
        initClassChart({
            legendData: [
                "java", "html", "css", "javaScript", "php", "vue"
            ],
            selected: {
                "java": true,
                "html": true,
                "css": true,
                "javaScript": false,
                "php": false,
                "vue": false
            },
            seriesData: [
                { name: "java", value: 0 },
                { name: "html", value: 0 },
                { name: "css", value: 0 },
                { name: "javaScript", value: 0 },
                { name: "php", value: 0 },
                { name: "vue", value: 0 }
            ],
        });
        initTeacherChart({
            legendData: [
                "java", "html", "css", "javaScript"
            ],
            seriesData: [
                { name: "java", value: 20 },
                { name: "html", value: 30 },
                { name: "css", value: 40 },
                { name: "javaScript", value: 50 }
            ],
        });
        window.onresize = function () {
            classCharts.resize();
            teacherCharts.resize();
    
        }
    }

</script>